<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:composition template="/WEB-INF/templates/default.xhtml">
        <ui:define name="title">
            <h:outputText value="#{i18n['application.label.title']}" />
        </ui:define>

        <ui:define name="content">
            <h:form id="itemForm">
                <h:panelGrid columns="3">

                    <h:outputLabel for="name"
                                   value="#{i18n['data.input.message.prefix']} #{i18n['customer.name']}" />
                    <h:inputText id="name" value="#{customerBean.selectedCustomer.name}"
                                 styleClass="text" />
                    <h:message for="name" styleClass="success" fatalClass="fatal"
                               infoClass="info" errorClass="error" warnClass="warning" />

                    <h:outputLabel for="birthday"
                                   value="#{i18n['data.set.message.prefix']} #{i18n['customer.birthday']}" />
                    <h:panelGroup>
                        <h:inputText id="birthday"
                                     value="#{customerBean.selectedCustomer.birthday}"
                                     styleClass="text"
                                     onclick="displayDatePicker('itemForm:birthday');">
                            <f:convertDateTime pattern="#{i18n['customer.birthday.pattern']}" />
                        </h:inputText>
                        <h:graphicImage name="calendar.png" library="images"
                                        onclick="displayDatePicker('itemForm:birthday');" alt="calendar" />
                    </h:panelGroup>
                    <h:message for="birthday" styleClass="success" fatalClass="fatal"
                               infoClass="info" errorClass="error" warnClass="warning" />

                    <h:outputLabel for="gender"
                                   value="#{i18n['data.set.message.prefix']} #{i18n['customer.gender']}" />
                    <h:selectOneMenu id="gender"
                                     value="#{customerBean.selectedCustomer.gender}" 
                                     styleClass="text"
                                     disabled="#{customerBean.update ? true : false}">
                        <f:selectItems value="#{customerBean.genderValues}" var="gender"
                                       itemLabel="#{i18n[gender.label]}" itemValue="#{gender}" />
                    </h:selectOneMenu>
                    <h:message for="gender" styleClass="success" fatalClass="fatal"
                               infoClass="info" errorClass="error" warnClass="warning" />

                    <h:outputLabel for="about"
                                   value="#{i18n['data.input.message.prefix']} #{i18n['customer.about']}" />
                    <h:inputTextarea id="about" cols="20" rows="10"
                                     value="#{customerBean.selectedCustomer.about}" styleClass="text" />
                    <h:message for="about" styleClass="success" fatalClass="fatal"
                               infoClass="info" errorClass="error" warnClass="warning" />

                    <h:outputLabel for="card"
                                   value="#{i18n['data.set.message.prefix']} #{i18n['customer.card']}" />
                    <h:selectOneMenu id="card"
                                     value="#{customerBean.selectedCustomer.card}" styleClass="text">
                        <f:selectItems value="#{customerBean.cardValues}" var="card"
                                       itemLabel="#{i18n[card.label]}" itemValue="#{card}" />
                    </h:selectOneMenu>
                    <h:message for="card" styleClass="success" fatalClass="fatal"
                               infoClass="info" errorClass="error" warnClass="warning" />

                    <h:outputLabel for="numberOfCards"
                                   value="#{i18n['data.input.message.prefix']} #{i18n['customer.numberOfCards']}" />
                    <h:inputText id="numberOfCards"
                                 value="#{customerBean.selectedCustomer.numberOfCards}"
                                 styleClass="text" />
                    <h:message for="numberOfCards" styleClass="success"
                               fatalClass="fatal" infoClass="info" errorClass="error"
                               warnClass="warning" />

                    <h:outputLabel for="email"
                                   value="#{i18n['data.input.message.prefix']} #{i18n['customer.email']}" />
                    <h:inputText id="email"
                                 value="#{customerBean.selectedCustomer.eMail}"
                                 styleClass="text" />
                    <h:message for="email" styleClass="success"
                               fatalClass="fatal" infoClass="info" errorClass="error"
                               warnClass="warning" />

                    <h:outputLabel for="mailingList"
                                   value="#{i18n['customer.mailingList']}" />
                    <h:selectBooleanCheckbox id="mailingList"
                                             value="#{customerBean.selectedCustomer.mailingList}"
                                             styleClass="text" />
                    <h:message for="mailingList" styleClass="success" fatalClass="fatal"
                               infoClass="info" errorClass="error" warnClass="warning" />

                    <h:outputLabel for="license" value="#{i18n['customer.license']}" />
                    <h:selectBooleanCheckbox id="license"
                                             value="#{customerBean.selectedCustomer.license}" styleClass="text" />
                    <h:message for="license" styleClass="success" fatalClass="fatal"
                               infoClass="info" errorClass="error" warnClass="warning" />
                </h:panelGrid>
                <h:panelGroup>
                    <h:commandLink
                        value="#{customerBean.update ? i18n['button.update'] : i18n['button.create']}"
                        actionListener="#{customerBean.save}"
                        styleClass="#{customerBean.update ? 'update' : 'create'}">
                        <f:ajax execute="@form" render=":listForm @form" />
                    </h:commandLink>
                    <h:commandLink value="#{i18n['button.cancel']}"
                                   action="#{customerBean.cancel}" styleClass="cancel"
                                   immediate="true" />
                </h:panelGroup>
            </h:form>
            <br />
            <h:form id="listForm">
                <h:panelGrid columns="1" columnClasses="right">
                    <h:panelGroup>
                        <h:outputText
                            value="#{i18n['data.label.count']}:  #{customerBean.count}"
                            styleClass="text" style="margin-right: 10px;" />
                        <h:commandLink value="#{i18n['button.clear']}"
                                       actionListener="#{customerBean.clear}" styleClass="clear">
                            <f:ajax execute="@form" render=":itemForm @form" />
                        </h:commandLink>
                        <h:commandLink value="#{i18n['button.refresh']}"
                                       actionListener="#{customerBean.refresh}" styleClass="refresh">
                            <f:ajax execute="@form" render=":itemForm @form" />
                        </h:commandLink>
                    </h:panelGroup>
                </h:panelGrid>
                <h:dataTable value="#{customerBean.customers}" var="customer">

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="#{i18n['customer.id']}" />
                        </f:facet>
                        <h:outputText value="#{customer.id}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="#{i18n['customer.name']}" />
                        </f:facet>
                        <h:outputText value="#{customer.name}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="#{i18n['customer.birthday']}" />
                        </f:facet>
                        <h:outputText value="#{customer.birthday}">
                            <f:convertDateTime locale="#{localeBean.locale}" type="date"
                                               dateStyle="full" />
                        </h:outputText>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="#{i18n['customer.gender']}" />
                        </f:facet>
                        <h:outputText value="#{i18n[customer.gender.label]}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="#{i18n['customer.about']}" />
                        </f:facet>
                        <h:outputText value="#{customer.about}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="#{i18n['customer.card']}" />
                        </f:facet>
                        <h:outputText value="#{i18n[customer.card.label]}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="#{i18n['customer.numberOfCards']}" />
                        </f:facet>
                        <h:outputText value="#{customer.numberOfCards}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="#{i18n['customer.email']}" />
                        </f:facet>
                        <h:outputText value="#{customer.eMail}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="#{i18n['customer.mailingList']}" />
                        </f:facet>
                        <h:outputText
                            value="#{customer.mailingList ? i18n['YES'] : i18n['NO']}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="#{i18n['customer.license']}" />
                        </f:facet>
                        <h:outputText
                            value="#{customer.license ? i18n['AGREE'] : i18n['DISAGREE']}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="#{i18n['data.label.actions']}" />
                        </f:facet>
                        <h:panelGroup>
                            <h:commandLink value="#{i18n['button.edit']}"
                                           actionListener="#{customerBean.edit}" styleClass="edit">
                                <f:ajax execute="@form" render=":itemForm @form" />
                            </h:commandLink>
                            <h:commandLink value="#{i18n['button.delete']}"
                                           actionListener="#{customerBean.delete}" styleClass="delete">
                                <f:ajax execute="@form" render=":itemForm @form" />
                            </h:commandLink>
                        </h:panelGroup>
                    </h:column>
                </h:dataTable>
            </h:form>
        </ui:define>
    </ui:composition>
</html>